<template>
    <el-dialog
      :visible.sync="isVisible"
      :destroy-on-close="true"
      :before-close="beforeClose"
      @open="beforeOpen"
      append-to-body
      title="转移超管"
      width="400px">

      <el-form ref="form" :model="form" label-width="120px" :label-position="'top'">
        <el-form-item label="团队超级管理员（选择当前团队成员转移）" prop="type">
          <el-select v-model="form.type" placeholder="请选择" filterable :style="{'width':'200px'}" @change="handleAfterUserIdChange">
            <el-option v-for="item in userList" :key="item.userId" :label="item.name" :value="item.userId"/>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
</template>

<script>
import { updateCompanyUserRole } from '@/api/enterprise/index';
import { getCompanyUserListWithoutUserId, transferLeader } from '@/api/enterprise/index';
export default {
  props: {
    isVisible: Boolean,
    userId: Number,
    companyId: String,
  },
  data() {
    return {
      form: {
        beforeUserId: 0,
        afterUserId: 0,
        companyId: '0'
      },
      userList: [],
      // 表单校验
      rules: {},
    };
  },
  methods: {
    // 获取用户列表
    handleGetUserList() {
      getCompanyUserListWithoutUserId({
        userId: this.form.beforeUserId,
        companyId: this.form.companyId
      }).then((res) => {
        this.userList = res.data.map(item => {
          return {
            name: `${item.userNickName}(${item.mobile})`,
            userId: item.userId
          }
        });
      });
    },
    beforeOpen() {
      console.log('beforeOpen:', this.userId, this.companyId);
      this.form.beforeUserId = this.userId;
      this.form.companyId = this.companyId;
      this.handleGetUserList();
    },
    beforeClose() {
      this.handleClose();
    },
    handleAfterUserIdChange(data) {
      this.form.afterUserId = data;
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm('form');
    },
    handleClose() {
      this.reset();
      this.$emit('update:isVisible', false);
      this.$emit('dialogCallBack');
    },
    // 提交按钮
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        const { beforeUserId, afterUserId, companyId } = this.form;
        const saveData = { beforeUserId, companyId, afterUserId };
        transferLeader(saveData).then((response) => {
          this.$modal.msgSuccess('修改成功');
          this.handleClose();
        });
      });
    },
  },
};
</script>
